<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>zyupload上传实例</title>
	<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../assets/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
	<link rel="stylesheet" href="../assets/css/public.css" media="all">
</head>

<body>
	<div class="admin-container">
		<div class="admin-main">
			<blockquote class="layui-elem-quote">
				上传组件使用开源项目：zyupload<br>
				<a href="http://www.jq22.com/jquery-info14213" target="_blank" class="layui-btn layui-btn-danger">zyupload</a>
			</blockquote>
			<div id="zyupload" class="zyupload"></div>
			<pre class="layui-code">
			// 初始化插件
			$("#zyupload").zyUpload({
				width: "650px",                 // 宽度
				height: "400px",                 // 宽度
				itemWidth: "140px",                 // 文件项的宽度
				itemHeight: "115px",                 // 文件项的高度
				url: "api/upload",  // 上传文件的路径
				fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
				fileSize: 51200000,                // 上传文件的大小
				multiple: true,                    // 是否可以多个文件上传
				dragDrop: true,                    // 是否可以拖动上传文件
				tailor: true,                    // 是否可以裁剪图片
				del: true,                    // 是否可以删除文件
				finishDel: false,                 // 是否在上传文件完成后删除预览
				/* 外部获得的回调接口 */
				onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
					console.info("当前选择了以下文件：");
					console.info(selectFiles);
				},
				onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
					console.info("当前删除了此文件：");
					console.info(file.name);
				},
				onSuccess: function (file, response) {          // 文件上传成功的回调方法
					console.info("此文件上传成功：");
					console.info(file.name);
					console.info("此文件上传到服务器地址：");
					console.info(response);
					$("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
				},
				onFailure: function (file, response) {          // 文件上传失败的回调方法
					console.info("此文件上传失败：");
					console.info(file.name);
				},
				onComplete: function (response) {                 // 上传完成的回调方法
					console.info("文件上传完成");
					console.info(response);
				}
			});
			</pre>
		</div>
	</div>
	<script src="../assets/js/jquery-3.4.1.min.js" charset="utf-8"></script>
	<script src="../assets/lib/layui/layui.js" charset="utf-8"></script>
	<script src="../assets/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			// 初始化插件
			$("#zyupload").zyUpload({
				width: "650px", // 宽度
				height: "400px", // 宽度
				itemWidth: "140px", // 文件项的宽度
				itemHeight: "115px", // 文件项的高度
				url: "api/upload", // 上传文件的路径
				fileType: ["jpg", "png", "txt", "js", "exe"], // 上传文件的类型
				fileSize: 51200000, // 上传文件的大小
				multiple: true, // 是否可以多个文件上传
				dragDrop: true, // 是否可以拖动上传文件
				tailor: true, // 是否可以裁剪图片
				del: true, // 是否可以删除文件
				finishDel: false, // 是否在上传文件完成后删除预览
				/* 外部获得的回调接口 */
				onSelect: function(selectFiles, allFiles) { // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
					console.info("当前选择了以下文件：");
					console.info(selectFiles);
				},
				onDelete: function(file, files) { // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
					console.info("当前删除了此文件：");
					console.info(file.name);
				},
				onSuccess: function(file, response) { // 文件上传成功的回调方法
					console.info("此文件上传成功：");
					console.info(file.name);
					console.info("此文件上传到服务器地址：");
					console.info(response);
					$("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
				},
				onFailure: function(file, response) { // 文件上传失败的回调方法
					console.info("此文件上传失败：");
					console.info(file.name);
				},
				onComplete: function(response) { // 上传完成的回调方法
					console.info("文件上传完成");
					console.info(response);
				}
			});

		});
	</script>
</body>

</html>